<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="computed-basics">
        {{count}}
        <button @click="count++">add</button>
        <hr>
        {{firstName}}
        <br>
        {{lastName}}
        <br>
        {{fullName}}
        <hr>
        <input type="text" v-model="userInput">
        <button @click="fullName=userInput">设置全名</button>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    count:0,
                    firstName:"John",
                    lastName:"Smith",
                    userInput:""
                }
            },

            methods: {
                hasBooksMethod() {
                    console.log("hasBooksMethod");
                    return this.author.books.length > 0 ? 'Yes' : 'No'
                }
            },

            /* getter与setter兼备的计算属性 */
            computed: {
                fullName: {
                    // getter 读取fullName时getter会被调用
                    get() {
                        console.log("getter");
                        return this.firstName + ' ' + this.lastName
                    },
                    
                    // <button @click="fullName=userInput">设置全名</button>
                    // setter 给fullName赋值时setter会被调用
                    set(newValue) {
                        console.log("setter");
                        const names = newValue.split(' ')

                        // 必须修改getter所依赖的一手数据 才能在页面访问该数据时获得新的值
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }

        }).mount('#computed-basics')
    </script>
</body>

</html>